<template>
  <div class="login">
    <!-- 顶部背景图  -->
    <div class="head_banner">
      <div class="head_tit">
        <span>赚易播</span>
        <span>zhuan yi bo</span>
      </div>
    </div>
    <!-- 账号密码输入 -->
    <ul class="import">
      <li class="import_item">
        <img class="import_img" src="../assets/myImg/shouji@2x.png" alt />
        <input class="import_inp" maxlength="12" type="text" v-model="user" placeholder="请输入手机号码" />
      </li>
      <li class="import_item">
        <img class="import_img" src="../assets/myImg/mima@2x.png" alt />
        <input class="import_inp" type="password" v-model="pass" placeholder="请输入密码(6-14位)" />
      </li>
    </ul>
    <!-- 登录按钮 -->
    <div class="login_btn" @click="loginBtn">
      <span>登录</span>
    </div>
  </div>
</template>

<script>
import { userLogin, getUserInfos } from "../api/login";
import { throtTling } from "../utils/throttling";
export default {
  name: "Login",
  data() {
    return {
      user: "",
      pass: "",
    };
  },
  methods: {
    //登录请求
    loginBtn: throtTling(function () { 
      let data = { name_mobile: this.user, user_pass: this.pass };
      userLogin(data).then((res) => {
        if (res.code == 200) {
          // 登录成功 将token存在本地
          window.localStorage.setItem("token", res.data.token);
          // 登录成功 获取个人信息数据 将头像存储到本地
          getUserInfos().then((res) => {
            if (res.code == 200) {
              window.localStorage.setItem("userImg", res.data.avatar);
            }
          });
          this.$toast({
            duration: "500",
            message: res.msg,
          });
          //   等待一秒后跳转到首页
          setTimeout(() => {
            this.$router.push("/home");
          }, 500);
        } else {
          // 提示错误信息
          this.$toast({
            duration: "2000",
            message: res.msg,
          });
        }
      });
    }, 2000),
  },
  mounted() {},
};
</script>

<style lang="less"  >
.head_banner {
  height: 6.253333rem;
  background: url(../assets/myImg/login_bg@2x.png) no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  .head_tit {
    margin: 0 auto;
    margin-top: 1.333333rem;
    width: 4rem;
    text-align: center;
    line-height: 0.853333rem;
    color: #fff;
    font-size: 0.906667rem;
    & span:nth-child(2) {
      font-size: 0.4rem;
      display: block;
    }
  }
}
.import {
  padding: 2.133333rem 1.066667rem;
  .import_item {
    padding-top: 0.266667rem;
    height: 1.333333rem;
    border-bottom: 0.013333rem solid #eee;
    .import_img {
      margin-left: 0.266667rem;
      width: 0.466667rem;
      height: 0.466667rem;
    }
    .import_inp {
      margin-left: 1.066667rem;
      height: 1.066667rem;
      width: 5.333333rem;
      font-size: 0.426667rem;
    }
  }
}
.login_btn {
  margin: 1.173333rem;
  height: 1.253333rem;
  line-height: 1.253333rem;
  text-align: center;
  font-size: 0.466667rem;
  color: #fff;
  background: #647cfa;
  border-radius: 0.6rem;
}
</style>
